<template>
     <div class="type-nav">
          <div class="container">
               <!-- 事件委派 | 事件委托 -->
               <div @mouseleave="leaveIndex" @mouseenter="enterShow">
                    <h2 class="all">全部商品分类</h2>
                    <!-- 三级联动 + 过渡动画-->
                    <transition name="sort">
                         <div class="sort" v-show="show">
                              <!-- 利用事件委派 + 编程式导航实现路由跳转和传递参数 -->
                              <div class="all-sort-list2" @click="goSearch">
                                   <div class="item" v-for="(c1, index) in categoryList" :key="c1.categoryId"
                                        :class="{ cur: currentIndex == index }">
                                        <h3 @mouseenter="changeIndex(index)">
                                             <a :data-categoryName="c1.categoryName"
                                                  :data-category1Id="c1.categoryId">{{
                                                            c1.categoryName
                                                  }}</a>
                                        </h3>
                                        <!-- 二、三级分类 -->
                                        <div class="item-list clearfix"
                                             :style="{ display: currentIndex == index ? 'block' : 'none' }">
                                             <div class="subitem" v-for="(c2, index) in c1.categoryChild"
                                                  :key="c2.categoryId">
                                                  <dl class="fore">
                                                       <dt>
                                                            <a :data-categoryName="c2.categoryName"
                                                                 :data-category2Id="c2.categoryId">{{ c2.categoryName
                                                                 }}</a>
                                                       </dt>
                                                       <dd>
                                                            <em v-for="(c3, index) in c2.categoryChild"
                                                                 :key="c3.categoryId">
                                                                 <a :data-categoryName="c3.categoryName"
                                                                      :data-category3Id="c3.categoryId">{{
          c3.categoryName
                                                                      }}</a>
                                                            </em>

                                                       </dd>
                                                  </dl>
                                             </div>
                                        </div>
                                   </div>

                              </div>
                         </div>
                    </transition>
               </div>
               <nav class="nav">
                    <a href="###">服装城</a>
                    <a href="###">美妆馆</a>
                    <a href="###">尚品汇超市</a>
                    <a href="###">全球购</a>
                    <a href="###">闪购</a>
                    <a href="###">团购</a>
                    <a href="###">有趣</a>
                    <a href="###">秒杀</a>
               </nav>
          </div>
     </div>
</template>
<script>
// 引入vuex的方法
import { mapState } from 'vuex'
// 引入方式： 节流按需加载
import throttle from 'lodash/throttle'
export default {
     name: 'TypeNav',
     data() {
          return {
               // 存储用户鼠标移上哪一个一级分类
               currentIndex: -1,
               show: true
          }
     },
     // 组件挂载完毕： 可以向服务器发送请求
     mounted() {
          // 当组件挂载完毕，让show属性变为false
          // 如果不是home组件 将TypeNav进行隐藏
          if (this.$route.path != '/home') {
               this.show = false
          }

     },
     computed: {
          ...mapState({
               // 右侧需要的一个函数，当使用这个属性的时候，右侧函数会立即执行一次
               // 注入一个参数state 其实即为大仓库的数据
               categoryList: (state) => {
                    return state.home.categoryList    // home为模块化路径
               }
          })
          // ...mapState('home',['categoryList'])
     },
     methods: {
          // 鼠标进入修改响应式数据currentIndex属性
          // throttle 不要用箭头函数 会出现上下文this的问题
          changeIndex: throttle(function (index) {   // 使用 k:value 的写法 节流的方式
               // index：鼠标移上某一个一级分类的元素的索引值
               this.currentIndex = index;
          }, 50),
          // 鼠标移出时 currentIndex属性变回-1
          leaveIndex() {
               this.currentIndex = -1
               // 判断如果是Search路由才会执行
               if (this.$route.path != '/home') {
                    // 当鼠标移除的时候，让全部商品分类列表进行隐藏
                    this.show = false
               }

          },
          // 实现路由跳转的方法
          goSearch(event) {
               // 最好的解决方案：编程式导航 + 事件委派
               // 第一个问题：把子节点当中的a标签，加上自定义属性data-categoryname,其余子节点是没有的
               let element = event.target
               // 获取带有data-categoryname这样的节点【一定是a标签】
               // 节点有一个dataset属性，可以获取节点的自定义属性与属性值
               let { categoryname, category1id, category2id, category3id } = element.dataset;
               // 如果标签身上拥有catename一定是a标签
               if (categoryname) {  // 为 a 标签
                    // 整理路由跳转的参数
                    let location = { name: "search" };
                    let query = { categoryName: categoryname };
                    // 一级分类、二级分类、三级分类的a标签
                    if (category1id) {
                         query.category1Id = category1id
                    } else if (category2id) {
                         query.category2Id = category2id
                    } else {
                         query.category3Id = category3id
                    }
                    // 判断：如果路由跳转的时候，带有params参数,把它传递过去
                    if (this.$route.params) {
                         location.params = this.$route.params;
                         // 动态给location配置对象添加query属性
                         location.query = query;
                         // 路由跳转
                         this.$router.push(location)
                    }
               }
          },
          // 当鼠标移入的时候，让全部商品分类列表进行展示
          enterShow() {
               if (this.$route.path != '/home') {
                    this.show = true
               }
          }
     },
}
</script>
<style lang="less" scoped>
.type-nav {
     border-bottom: 2px solid #e1251b;

     .container {
          width: 1200px;
          margin: 0 auto;
          display: flex;
          position: relative;

          .all {
               width: 210px;
               height: 45px;
               background-color: #e1251b;
               line-height: 45px;
               text-align: center;
               color: #fff;
               font-size: 14px;
               font-weight: bold;
          }

          .nav {
               a {
                    height: 45px;
                    margin: 0 22px;
                    line-height: 45px;
                    font-size: 16px;
                    color: #333;
               }
          }

          .sort {
               position: absolute;
               left: 0;
               top: 45px;
               width: 210px;
               height: 461px;
               position: absolute;
               background: #fafafa;
               z-index: 999;

               .all-sort-list2 {
                    .item {
                         h3 {
                              line-height: 30px;
                              font-size: 14px;
                              font-weight: 400;
                              overflow: hidden;
                              padding: 0 20px;
                              margin: 0;

                              a {
                                   color: #333;
                              }
                         }

                         .item-list {
                              display: none;
                              position: absolute;
                              width: 734px;
                              min-height: 460px;
                              background: #f7f7f7;
                              left: 210px;
                              border: 1px solid #ddd;
                              top: 0;
                              z-index: 9999 !important;

                              .subitem {
                                   float: left;
                                   width: 650px;
                                   padding: 0 4px 0 8px;

                                   dl {
                                        border-top: 1px solid #eee;
                                        padding: 6px 0;
                                        overflow: hidden;
                                        zoom: 1;

                                        &.fore {
                                             border-top: 0;
                                        }

                                        dt {
                                             float: left;
                                             width: 54px;
                                             line-height: 22px;
                                             text-align: right;
                                             padding: 3px 6px 0 0;
                                             font-weight: 700;
                                        }

                                        dd {
                                             float: left;
                                             width: 415px;
                                             padding: 3px 0 0;
                                             overflow: hidden;

                                             em {
                                                  float: left;
                                                  height: 14px;
                                                  line-height: 14px;
                                                  padding: 0 8px;
                                                  margin-top: 5px;
                                                  border-left: 1px solid #ccc;
                                             }
                                        }
                                   }
                              }
                         }


                    }

                    .cur {
                         background-color: skyblue;
                    }
               }
          }

          // 过渡动画的样式
          // 过渡动画开始的状态(进入)
          .sort-enter {
               height: 0;
          }

          // 过渡动画结束的状态(离开)
          .sort-enter-to {
               height: 416px;
          }

          // 定义动画时间，速度
          .sort-enter-active {
               transition: all .5s linear;
          }
     }
}
</style>
